import React,{useEffect,useState} from "react";
import { Row, Col, Icon } from "antd";
import CountUp from "react-countup";
import "./index.less";
import { reqAll } from "../../../../api/all";


const PanelGroup = (props) => {
    const { handleSetLineChartData } = props;
    const [chartList,setChartList] = useState([
        {
            type: "用户数",
            icon: "user",
            num: 102400,
            color: "#40c9c6",
        },
        {
            type: "建议数",
            icon: "message",
            num: 8122,
            color: "#36a3f7",
        },
        {
            type: "总点赞数",
            icon: "like",
            num: 92850,
            color: "#f4516c",
        },
        {
            type: "总收藏数",
            icon: "heart",
            num: 13600,
            color: "#f6ab40",
        },
    ])
    useEffect(() => {
        let fetchData = () => {
            reqAll()
            .then(r => {
                console.log(r);
                setChartList([
                    {
                        type: "用户数",
                        icon: "user",
                        num: r.data.allUser,
                        color: "#40c9c6",
                    },
                    {
                        type: "建议数",
                        icon: "message",
                        num: r.data.allSuggestion,
                        color: "#36a3f7",
                    },
                    {
                        type: "总点赞数",
                        icon: "like",
                        num: r.data.allPraise,
                        color: "#f4516c",
                    },
                    {
                        type: "总收藏数",
                        icon: "heart",
                        num: r.data.allCollect,
                        color: "#f6ab40",
                    },
                ]);
            })
        }
        fetchData();
        
    }, [])
    
    
    return (
        <div className="panel-group-container">
            <Row gutter={40} className="panel-group">
                {chartList.map((chart, i) => (
                    <Col
                        key={i}
                        lg={6}
                        sm={12}
                        xs={12}
                        onClick={handleSetLineChartData.bind(this, chart.type)}
                        className="card-panel-col"
                    >
                        <div className="card-panel">
                            <div className="card-panel-icon-wrapper">
                                <Icon
                                    className={chart.type}
                                    style={{ fontSize: 55, color: chart.color }}
                                    type={chart.icon}
                                />
                            </div>
                            <div className="card-panel-description">
                                <p className="card-panel-text">{chart.type}</p>
                                <CountUp end={chart.num} start={0} className="card-panel-num" />
                            </div>
                        </div>
                    </Col>
                ))}
            </Row>
        </div>
    );
};

export default PanelGroup;
